<template>
  <table-header
          :queryList="queryList"
          @pagination="getDataList"
          :rightColSpan="8"
          :leftColSpan="16"
  >
    <template #filter>
      <el-select
              placeholder="选择媒资类型"
              v-model="queryList.mediatype"
              clearable
              @change="handleFilter"
              class="select-w mr10" size="small">
        <el-option
                v-for="mediatype in mediaTypeList"
                :key="mediatype.mediatype"
                :label="mediatype.name"
                :value="mediatype.mediatype"
        />
      </el-select>
      <el-input
              placeholder="请输入分类名称"
              v-model="queryList.keyword"
              clearable class="input-w" size="small"
              @clear="handleFilter"
              @keyup.enter="handleFilter"
      />
    </template>
    <template #operation>
      <el-button type="primary" size="mini" @click="handleCreate">
        <el-icon>
          <plus />
        </el-icon>
        新建一级分类
      </el-button>
    </template>
  </table-header>
  <table-data :tableData="tableData" :isloading="isloading">
    <template #main>
      <el-table-column label="名称" prop="name" />
      <el-table-column label="媒资类型" width="100">
        <template #default="{row}">
          {{mediaTypes[row.mediatype]}}
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" />
      <el-table-column label="创建时间">
        <template #default="{row}">
          {{row.ctime.replace('T', ' ').replace('Z', '')}}
        </template>
      </el-table-column>
      <el-table-column label="更新时间">
        <template #default="{row}">
          {{row.mtime.replace('T', ' ').replace('Z', '')}}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="{row}">
          <el-button type="text" size="mini" v-if="row.inuse == 1">上线</el-button>
          <el-button type="text" size="mini" style="color: red" v-else>下线</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="text" size="mini" @click="handleUpdate(row)" :disabled="row.isdefault == 1" :title="row.isdefault == 1 ? '系统分类不可操作' : ''">编辑</el-button>
          <el-button type="text" size="mini" :style="{color: row.isdefault == 1 ? '' : 'red'}" @click="handleDelete(row)" :disabled="row.isdefault == 1" :title="row.isdefault == 1 ? '系统分类不可操作' : ''">删除</el-button>
          <el-button type="text" @click="handleSubCate(row)" size="mini">二级分类</el-button>
          <!--<span v-if="row.isdefault == 1" class="mr10">系统分类不可操作</span>
          <span v-else class="mr10">
            <el-button type="text" size="mini" @click="handleUpdate(row)">编辑</el-button>
          <el-button type="text" size="mini" style="color: red" @click="handleDelete(row)">删除</el-button>
          </span>-->

        </template>
      </el-table-column>
    </template>
  </table-data>
  <el-row class="mt10">
    <el-col :span="24">
      <table-pagination
              :queryList="queryList"
              :total="tableData.total"
              @pagination="getDataList"
      />
    </el-col>
  </el-row>
  <create-category
          ref="createCategoryRef"
          :dialog-form-data="dialogFormData"
          :dialog-visible="dialogVisible"
          :dialog-status="dialogStatus"
          :media-type-list="mediaTypeList"
          @handleCancleDialog="handleCancleDialog"
          @reloadData="getDataList"
  />
</template>

<script>
  import {reactive, ref, nextTick} from 'vue'
  import {useRouter} from 'vue-router'
  import TableHeader from "@/views/public/TableHeader";
  import TableData from "@/views/public/TableData";
  import TablePagination from "@/views/public/TablePagination";
  import {Plus} from "@element-plus/icons"
  import mediaTypeMixin from "@/mixins/mediaTypeMixin";
  import {getCategories, deleteCategory} from "@/api/media/constant";
  import CreateCategory from "./components/CreateCategory";
  import {ElMessageBox, ElMessage} from 'element-plus'

  export default {
    name: "index",
    components: {TableHeader, TableData, TablePagination, Plus, CreateCategory},
    setup() {
      const router = useRouter()
      const {mediaTypeList, mediaTypes} = mediaTypeMixin()
      const queryList = reactive({
        page: 1,
        pagesize: 25,
        keyword: undefined,
        mediatype: undefined
      })
      const isloading = ref(false)
      const tableData = reactive({
        total: 0,
        listData: []
      })
      const dialogVisible = ref(false)
      const dialogStatus = ref('create')
      const dialogFormData = reactive({
        catid: undefined,
        name: '',
        mediatype: '',
        sort: 1
      })
      const createCategoryRef = ref(null)

      /** 获取一级分类列表 **/
      const getDataList = () => {
        isloading.value = true
        getCategories(queryList).then(response => {
          isloading.value = false
          const {total, list} = response.data
          tableData.total = total
          tableData.listData = list
        })
      }
      /** 数据过滤 **/
      const handleFilter = () => {
        queryList.page = 1
        getDataList()
      }
      /** 跳转到二级分类 **/
      const handleSubCate = (row) => {
        router.push({path: '/constant/category/subcate', query: {catid: row.catid, mediatype: row.mediatype}})
      }
      /** 开启新建以及分类弹框 **/
      const handleCreate = () => {
        resetDialogFormData()
        dialogStatus.value = 'create'
        dialogVisible.value = true
        nextTick(() => {
          createCategoryRef.value.dialogFormRef.clearValidate()
        })
      }
      /** 重置form表单 **/
      const resetDialogFormData = () => {
        dialogFormData.catid = undefined
        dialogFormData.name = ''
        dialogFormData.mediatype = ''
        dialogFormData.sort = 1
      }
      /** 关闭弹框 **/
      const handleCancleDialog = () => {
        dialogVisible.value = false
      }
      /** 编辑分类弹框开启 **/
      const handleUpdate = (row) => {
        dialogFormData.catid = row.catid
        dialogFormData.name = row.name
        dialogFormData.mediatype = row.mediatype
        dialogFormData.sort = row.sort
        dialogStatus.value = 'update'
        dialogVisible.value = true
        nextTick(() => {
          createCategoryRef.value.dialogFormRef.clearValidate()
        })
      }
      /** 删除一级分类 **/
      const handleDelete = (row) => {
        ElMessageBox.confirm('确定要删除一级分类 ' + row.name + ' 吗？', '删除一级分类', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCategory({catid: row.catid}).then(response => {
            ElMessage({type: 'success', message: response.msg, duration: 2000})
            getDataList()
          })
        }).catch(() => {})
      }

      const init = () => {
        getDataList()
      }
      init()

      return {
        mediaTypeList,
        mediaTypes,
        queryList,
        getDataList,
        isloading,
        tableData,
        handleFilter,
        handleSubCate,
        dialogStatus,
        dialogVisible,
        dialogFormData,
        handleCreate,
        handleCancleDialog,
        createCategoryRef,
        handleUpdate,
        handleDelete
      }
    }
  }
</script>

<style scoped>

</style>
